<template>
  <div>
      <el-form :model="customEnumForm" label-width="120px">
        <el-form-item label="枚举类名">
          <el-input v-model="customEnumForm.customEnumClassName"/>
        </el-form-item>
        <el-form-item label="枚举完整包名">
          <el-input v-model="customEnumForm.fullPackageName"/>
        </el-form-item>
        <el-form-item label="枚举key的索引">
          <el-select v-model="customEnumForm.keyIndex" placeholder="枚举key的索引">
            <el-option label="0" value="0"/>
            <el-option label="1" value="1"/>
            <el-option label="2" value="2"/>
            <el-option label="3" value="3"/>
            <el-option label="4" value="4"/>
            <el-option label="5" value="5"/>
          </el-select>
        </el-form-item>
        <el-form-item label="选择文件">
          <input @change="changeFile" type="file" accept="text/csv" style="display: block">
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">生成</el-button>
        </el-form-item>
      </el-form>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>生成结果</span>
<!--          <el-button style="float: right; padding: 3px 6px" type="text"  v-clipboard='customEnumResult'>一键复制</el-button>-->
          <el-button style="float: right; padding: 3px 0" type="text" @click="clearResult()">清空结果</el-button>
        </div>
        <div>
         <pre>{{customEnumResult}}</pre>
        </div>
      </el-card>
  </div>
</template>

<script>
// vue add axios 先增加插件，使用命令行操作
// 导入
import axios from 'axios'
import VueClipboards from 'vue-clipboards'
import Vue from 'vue'
Vue.use(VueClipboards)
export default {
  name: 'customEnumVue',
  data () {
    return {
      // 自定义枚举的表单数据
      customEnumForm: {
        customEnumClassName: '',
        fullPackageName: '',
        // 默认第一列为key
        keyIndex: 0,
        uploadFile: ''
      },
      // 生成结果
      customEnumResult: '',
      rules: {
        customEnumClassName: [
          { required: true, message: '请输入要生成的枚举类名', trigger: 'blur', placeholder: '枚举类名' }
        ],
        fullPackageName: [
          { required: true, message: '请输入要生成的枚举完整包名', trigger: 'blur', placeholder: '枚举类完整包名' }
        ],
        keyIndex: [
          { required: true, message: '请选择枚举key对应的列', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 选择文件，获取文件
    changeFile (event) {
      this.customEnumForm.uploadFile = event.target.files[0]
    },
    // 提交表单
    submitForm () {
      const _this = this
      const formData = new FormData()
      formData.append('customEnumClassName', _this.customEnumForm.customEnumClassName)
      formData.append('fullPackageName', _this.customEnumForm.fullPackageName)
      formData.append('keyIndex', _this.customEnumForm.keyIndex)
      formData.append('uploadFile', _this.customEnumForm.uploadFile)
      axios.post('http://localhost:18080/junzi/download/customEnum', formData, {
        'Content-type': 'multipart/form-data',
        'Access-Control-Allow-Origin': '*'
      }).then(function (resp) {
        _this.customEnumResult = resp.data
        console.log(_this.customEnumResult)
      })
    },
    // 清空结果
    clearResult () {
      const _this = this
      _this.customEnumResult = ''
    }//,
    // 一键复制
    // copySuccess ({ value, event }) {
    //   console.log('success', value)
    //   this.$message.success('已复制')
    // },
    // copyError ({ value, event }) {
    //   console.log('error', value)
    //   this.$message.error('复制失败')
    // }
  }
}
</script>

<style scoped>

</style>
